<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>抱团商家</title>
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no,minimal-ui,viewport-fit=cover"/>
    <meta name="keywords" content="抱团">
    <meta name="description" content="抱团">
    <script type="text/javascript" src="../common/js/base.js" charset="UTF-8"></script>
    <link rel="stylesheet" type="text/css" href="../common/css/elementui.min.css">
    <link rel="stylesheet" type="text/css" href="../common/css/animate.min.css">
    <link rel="stylesheet" type="text/css" href="../common/css/nanoscroller.css">
    <link rel="stylesheet" type="text/css" href="../common/css/swiper-bundle.min.css">
    <link rel="stylesheet" type="text/css" href="../common/css/base.css">
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <script type='text/javascript' src="../common/js/jquery.min.js" charset="UTF-8"></script>
    <script type='text/javascript' src="../common/js/jquery.easing.js" charset="UTF-8"></script>
    <script type='text/javascript' src="../common/js/html2canvas.min.js" charset="UTF-8"></script>
    <script type="text/javascript" src="../common/js/layer/layer.js" charset="UTF-8"></script>
    <script type="text/javascript" src="../common/js/wow.js" charset="UTF-8"></script>
    <script type="text/javascript" src="../common/js/vue.js" charset="UTF-8"></script>
    <script type="text/javascript" src="../common/js/vue-resource.js" charset="UTF-8"></script>
    <script type="text/javascript" src="../common/js/axios.min.js" charset="UTF-8"></script>
    <script type='text/javascript' src="../common/js/elementui.min.js" charset="UTF-8"></script>
    <script type='text/javascript' src="../common/js/jquery.nanoscroller.js" charset="UTF-8"></script>
    <script type='text/javascript' src="../common/js/swiper.animate.min.js" charset="UTF-8"></script>
    <script type='text/javascript' src="../common/js/swiper-bundle.min.js" charset="UTF-8"></script>
    <script type='text/javascript' src="../common/js/helper.js" charset="UTF-8"></script>
</head>
<body>
<div class="wrapperbox activepage hasmenu" id="app">
    <!-- 活动信息页 -->
    <div class="page">
        <span class="itempage" :class="{active: tab_index===1}" v-on:click="tabChange(1)">活动信息</span>
        <span class="itempage" :class="{active: tab_index===2}" v-on:click="tabChange(2)">销售信息</span>
    </div>

    <div v-if="tab_index===1">
        <div class="activemessage" v-for="product in products">
            <div class="activeproject">
                <div class="apitemtittle">
                    <span>{{product.title}}</span>
                    <img src="images/activeing.png" v-if="product.ongoing_status === 'on_sale'">
                    <img src="images/offline_soon.png" v-if="product.ongoing_status === 'offline_soon'">
                    <img src="images/coming_soon.png" v-if="product.ongoing_status === 'coming_soon'">
                    <img src="images/actived.png" v-if="product.ongoing_status === 'expired'">
                </div>
                <div class="selllist">
                    <div class="listnum"><span>上架时间：</span>
                        <h3>{{product.start_time}}</h3></div>
                    <div class="listnum"><span>下架时间：</span>
                        <h3>{{product.end_time}}</h3></div>
                </div>
                <div class="selllist">
                    <div class="listnum"><span>使用时间：</span>
                        <h3>{{product.available_from_date}}</h3></div>
                    <div class="listnum"><span>结束时间：</span>
                        <h3>{{product.available_until_date}}</h3></div>
                </div>
                <div class="package" v-for="spec in product.specs">
                    <div class="packagetittle">{{spec.spec_name}}</div>
                    <div class="packagemessage" v-if="spec.description !== ''">{{spec.description}}</div>
                    <div class="packagenum">
                        <div class="timeitem">套餐价格：<h3>{{spec.sale_price}}</h3></div>
                        <div class="timeitem">原价格：<h3>{{spec.original_price}}</h3></div>
                        <div class="timeitem">套餐库存：<h3>{{spec.inventory}}</h3></div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 销售信息页 -->
    <div v-if="tab_index === 2">
        <div class="sellmessage" v-for="product in product_summaries">
            <div class="activeproject" style="padding-bottom: 0.22rem">
                <div class="apitemtittle" style="margin-bottom:0.22rem">
                    <span>{{product.title}}</span>
                    <img src="images/activeing.png" v-if="product.ongoing_status === 'on_sale'">
                    <img src="images/offline_soon.png" v-if="product.ongoing_status === 'offline_soon'">
                    <img src="images/coming_soon.png" v-if="product.ongoing_status === 'coming_soon'">
                    <img src="images/actived.png" v-if="product.ongoing_status === 'expired'">
                </div>
                <div class="selllist">
                    <div class="listnumall">总销售金额：<h3>{{product.summary.display_sale_amount || 0}}</h3></div>
                </div>
                <div class="selllist">
                    <div class="listnum"><span>总销售数量：</span>
                        <h3>{{product.summary.sale_units || 0}}</h3></div>
                    <div class="listnum"><span>已使用数量：</span>
                        <h3>{{product.summary.used_units || 0}}</h3></div>
                </div>
                <div class="selllist">
                    <div class="listnum"><span>已消费金额：</span>
                        <h3>{{product.summary.display_used_amount || 0}}</h3></div>
                    <div class="listnum"><span>未消费金额：</span>
                        <h3>{{product.summary.display_unused_amount || 0}}</h3></div>
                </div>
                <div v-for="spec in product.specs">
                    <div class="selllistname">{{spec.spec_name}}</div>
                    <div class="selllist">
                        <div class="listnumall">总销售金额：<h3>{{spec.summary.display_sale_amount || 0}}</h3></div>
                    </div>
                    <div class="selllist">
                        <div class="listnum"><span>总销售数量：</span>
                            <h3>{{spec.summary.sale_units || 0}}</h3></div>
                        <div class="listnum"><span>已使用数量：</span>
                            <h3>{{spec.summary.used_units || 0}}</h3></div>
                    </div>
                    <div class="selllist">
                        <div class="listnum"><span>已消费金额：</span>
                            <h3>{{spec.summary.display_used_amount || 0}}</h3></div>
                        <div class="listnum"><span>未消费金额：</span>
                            <h3>{{spec.summary.display_unused_amount || 0}}</h3></div>
                    </div>
                </div>
            </div>
        </div>
    </div>


    <div class="footer">
        <div class="item">
            <a href="shophome.html">
                <img class="itemimg" src="images/nav_home.png">
                <p class="itemname">首页</p>
            </a>
        </div>
        <div class="item">
            <a href="activity.html">
                <img class="itemimg" src="images/nav_activity_active.png">
                <p class="itemname">活动及销售</p>
            </a>
        </div>
        <div class="item">
            <a href="order.html">
                <img class="itemimg" src="images/nav_order.png">
                <p class="itemname">订单</p>
            </a>
        </div>
        <div class="item">
            <a href="my.html">
                <img class="itemimg" src="images/nav_my.png">
                <p class="itemname">我的</p>
            </a>
        </div>
    </div>
</div>

</body>
<script>
  $(function () {
    new Vue({
      el: '#app',
      data() {
        return {
          tab_index: 1,
          products: [],
          product_summaries: [],
        }
      },
      mounted() {
        wow = new WOW({
          animateClass: 'animated',
          offset: 0
        });
        wow.init();
        this.loadData()
      },
      methods: {
        tabChange: function (index) {
          this.tab_index = index
          this.loadData()
        },
        loadData: function () {
          if (this.tab_index === 1) {
            this.products = []
            merchant_get('products').then(res => {
              this.products = res
            })
          }
          if (this.tab_index === 2) {
            this.product_summaries = []
            merchant_get('products/summary').then(res => {
              this.product_summaries = res
            })
          }

        },
      }
    });
  })
</script>
</html>
